<template>
  <a-layout>
    <div class="head">
      <a-button icon="left" type="link" style="color: #d8d8d8" @click="$router.go(-1)">返回</a-button>
    </div>
    <div class="operation">
      <p style="font-size: 14px; color: #222426">
        技术部{{ personalPeriod }}
        <span style="font-size: 14px; color: #777777">
          （计薪周期：{{ this.monthly }}月01日-{{ this.monthly }}月{{ monthDateCount }}日）
        </span>
      </p>
    </div>

    <div class="fix-item-wrapper">
      <div class="fix-item-one">
        <p class="fix-item-name">专项附加扣除累计</p>
      </div>
      <div class="fix-item-two">
        <div>
          <p class="childpProjectName">请从税务局系统导出专项附加扣除累计报表后，直接导入本系统参与每月个税计算</p>
        </div>
      </div>
      <div class="fix-item-three">
        <div>
          <p class="childpProjectName">
            <a-button type="link" block @click="showSpecial"> 导入专项附加扣除累计 </a-button>
          </p>
        </div>
      </div>
    </div>
    <div class="fix-item-wrapper">
      <div class="fix-item-one">
        <p class="fix-item-name">截止上月个税累计</p>
      </div>
      <div class="fix-item-two">
        <div>
          <p class="childpProjectName">若非纳税年度第一个月份开始使用系统，或上月个税累计值有误，请通过录入截止上月个税累计进行修改</p>
        </div>
      </div>
    </div>
    <div>
      <a-button
        class="primary_bg"
        :disabled="empList.length <= 0"
        @click="accountWage"
        type="primary"
        style="width: 152px; height: 36px; border-radius: 4px; margin-left: 45%; margin-bottom: 100px"
      >
        计算工资
      </a-button>
    </div>
  </a-layout>
</template>
<script>
import { getnotDetailsList, synchronous, account } from "@/api/wages/monthly";
export default {
  data() {
    return {
      empList: [],
      synchronousState: false,
      empSynchronous: [],
      salaryTemplateId: null,
      companyId: this.$store.state.hr.companyId,
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      personalPeriod: null,
      monthly: null,
      yearly: null,
      monthDateCount: null
    };
  },

  created() {
    this.salaryTemplateId = this.$route.query.salaryTemplateId;
    this.personalPeriod = this.$route.query.personalPeriod;
    this.templateId = this.$route.query.templateId;
    this.monthly = this.$route.query.monthly;
    this.yearly = this.$route.query.yearly;
    this.getCountDays();
  },

  beforeDestory() {},
  methods: {
    accountWage() {
      account({
        companyId: this.companyId,
        salaryTemplateSalaryId: parseInt(this.salaryTemplateId),
        empSalaryList: this.empList,
        monthly: parseInt(this.monthly),
        yearly: parseInt(this.yearly)
      }).then((res) => {
        this.$notification["success"]({
          message: "成功",
          description: "计算成功"
        });
      });
    },
    getCountDays() {
      const year = parseInt(this.monthly);
      const month = parseInt(this.yearly);
      const date = new Date(year, month, 0);

      this.monthDateCount = date.getDate();
      getnotDetailsList({
        companyId: this.companyId,
        salaryTemplateIds: this.templateId,
        monthly: parseInt(this.monthly),
        yearly: parseInt(this.yearly)
      }).then((res) => {
        // this.empList = res.data.allPayrollPersonnelIds;
        res.data.allPayrollPersonnelIds.forEach((item) => {
          this.empList.push({ empId: item });
        });
        this.empSynchronous = res.data;
        this.synchronousState = true;
      });
    },
    synchronousDetail() {
      synchronous({
        salaryTemplateSalaryId: this.salaryTemplateId,
        month: this.monthly,
        year: this.yearly
      }).then((res) => {
        this.$notification["success"]({
          message: "成功",
          description: "同步成功"
        });
      });
    },
    synchronous() {
      getnotDetailsList({
        companyId: this.companyId,
        salaryTemplateIds: this.templateId,
        monthly: parseInt(this.monthly),
        yearly: parseInt(this.yearly)
      }).then((res) => {
        // this.empList = res.data.allPayrollPersonnelIds;
        this.$notification["success"]({
          message: "成功",
          description: "同步成功"
        });
        res.data.allPayrollPersonnelIds.forEach((item) => {
          this.empList.push({ empId: item });
        });
        this.empSynchronous = res.data;
        this.synchronousState = true;
      });
    },
    showSpecial() {
      this.$router.push({
        path: "/wages/monthly/special",
        query: {
          month: this.monthly,
          year: this.yearly
        }
      });
    },
    goTax() {
      this.$router.push({
        path: "/wages/monthly/incomeTax",
        query: {
          monthly: this.monthly,
          yearly: this.yearly,
          salaryTemplateId: this.salaryTemplateId
        }
      });
    },
    goCalculation() {
      this.$router.push({
        path: "/wages/monthly/calculation"
      });
    },
    goEdit() {
      this.$router.push({
        path: "/wages/monthly/editDetails"
      });
    }
  }
};
</script>
<style lang="scss" scoped>
$body-width: calc(100% - 338px);
.head {
  padding: 10px 0 10px 0;
  width: 100%;
  display: flex;
  text-align: center;
  line-height: 60px;
  justify-content: space-between;
}
.fix-item-wrapper {
  margin: 10px 20px 0 20px;
  display: flex;
  // width: 100%;
  height: 120px;
  background: #ffffff;
  border-radius: 8px;
  margin-bottom: 20px;
  padding: 33px;
  border: 1px solid #e8e8e8;
  display: flex;
  .fix-item-one {
    height: 40px;
    display: flex;
    align-self: center;
    padding-left: 40px;
    width: 20%;
    box-shadow: 1px 0px 0px 0px #e8e8e8;
  }
  .fix-item-two {
    color: #9c9c9c;
    padding-left: 45px;
    margin-top: 10px;
    width: 60%;
    height: 45px;
    padding-right: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 1px 0px 0px 0px #e8e8e8;
  }
  .fix-item-three {
    color: var(--primary);
    padding-left: 45px;
    margin-top: 10px;
    width: 20%;
    height: 45px;
    padding-right: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .fix-item-name {
    font-size: 18px;
    font-weight: 500;
    color: #222426;
    font-family: PingFangSC-Semibold, PingFang SC;
    line-height: 28px;
  }
}
.childpProjectName {
  font-family: PingFangSC-Regular, PingFang SC;
  font-size: 16px;
  font-weight: 400;
}
.operation {
  padding-left: 20px;
}
</style>
